<template>
    <div class="box">
            
        <div class="header">
            <van-tabs type="link" background="rgba(232, 231, 231, 1)">
                <van-tab title="我的"></van-tab>
            </van-tabs>
            <router-link to="/login" tag="span" class="login">我要登陆</router-link>
            <span class="set" @click="out()">退出登陆</span>
            <div class="headimg">
                <img :src="userheardimg" >
                <h4>{{this.$store.state.username}}</h4>
                <p>萨达萨达</p>
            </div>
        </div>
        <div class="center">
            <div class="left">
                <h4>{{userattention}}</h4>
                <p>关注</p>
            </div>
            <div class="right">
                <h4>{{userfans}}</h4>
                <p>粉丝</p>
            </div>
        </div>
       <div class="list">
           <div class="listonce">
               <router-link to="/member" tag="p"><van-icon name="circle"/>会员中心</router-link>
           </div>
            <div class="listtow">
               <router-link to="/makealbum" tag="p"><van-icon name="circle"/>制作相册</router-link>
               <router-link to="/ifavorite" tag="p"><van-icon name="circle"/>我的收藏</router-link>
           </div>
            <div class="listthree">
               <router-link to="/cart" tag="p"><van-icon name="circle"/>购物车</router-link>
               <router-link to="/myorder" tag="p"><van-icon name="circle"/>我的订单</router-link>
               <router-link to="/coupons" tag="p"><van-icon name="circle"/>优惠券</router-link>
           </div>
       </div>
    </div>
</template>

<script>
import Axios from 'axios';
    export default {
        data() {
            return {
                outname:'',
                outpass:'',
                outtoken:'',
                userheardimg:'',
                userattention:'',
                userfans:''
            }
        },
        methods: {
            out(){
                this.$store.commit('user',this.outname),
                this.$store.commit('pass',this.outpass),
                this.$store.commit('token',this.outtoken)
                this.$router.push('/login')
            }
        },
        mounted() {
            let that = this
            Axios({
                url:"http://www.txzxk.com/api"
            }).then(function(data){
                that.userattention = data.data.txzxk.num
                that.userheardimg = data.data.txzxk.img
                that.userfans = data.data.txzxk.pnum
            })
        },
    }
</script>

<style scoped>
    .box{
        width: 100%;
        height: 100%;
        overflow: hidden;
        position: fixed;
    }
    .header{
      left: -33px;
    top: 0px;
    width: 440px;
    height: 265px;
    line-height: 20px;
    background-color: rgba(232, 231, 231, 1);
    color: rgba(16, 16, 16, 1);
    font-size: 14px;
    text-align: center;
    font-family: Arial;
    border: 1px solid rgba(255, 255, 255, 0);
    border-radius: 0 0 50% 50%;
    position: relative;
    }
    .set{
        position: absolute;
        left: 79%;
        bottom: 88%;
        z-index: 999;
        font-size: 10px;
        color: #666
       
    }
    .login{
        position: absolute;
        right: 79%;
        bottom: 88%;
        z-index: 999;
        font-size: 10px;
        color: #666
    }
    .headimg{
       position: absolute;
       left: 40%;
       bottom: 30%;
       color: #646464
    }
    .headimg img{
        width: 90px;
        height: 90px;
        border-radius: 50%;
        display: block
    }
    .headimg h4{
        font-weight: bold;
        font-size: 14px
    }
    .headimg p{
        font-size: 10px
    }
    .center{
        left: 19px;
        top: 10px;
        width: 337px;
        height: 90px;
        line-height: 20px;
        border-radius: 8px;
        background-color: rgba(242, 242, 242, 1);
        text-align: center;
        border: 1px solid rgba(255, 255, 255, 0);
        position: relative;
        font-size: 14px;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    .center .left{
        width: 95px;
        height: 45px;
    }
    .center .right{
        width: 95px;
         height: 45px;
    }
    .list{
        width: 337px;
        position: relative;
        font-size: 14px;
        left: 17px;
        top: 50px
    }
    .list div{
        border-bottom: 1px solid #d7d4d4
    }
    .list div p{
        height: 42px;
        line-height: 42px
    }
    .list div p .van-icon{
        margin-right: 10px
    }
</style>